<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type=text/javascript src="game.js"></script>
        <script>
    //移动函数
      function shang(s){
            var myMario = document.getElementById('marioImg');
            var oldTop = parseInt(myMario.style.top);
            var newTop = oldTop;
            if(oldTop < 50){
                window.alert('到最上边了');
                return false;
            }
            var timeInt = window.setInterval(function(){
                newTop -= 5;
                myMario.style[s] = (newTop)+"px";
                if(oldTop - newTop  >= 50) {
                        clearInterval(timeInt);
                        }
                }, 50);
      };
            function xia(s){
            var myMario = document.getElementById('marioImg');
            var oldTop = parseInt(myMario.style.top);
            var newTop = oldTop;
            if(oldTop > 300){
                window.alert('到最下边了');
                return false;
            }
            var timeInt = window.setInterval(function(){
                newTop += 5;
                myMario.style[s] = (newTop)+"px";
                if(newTop - oldTop >= 50) {
                        clearInterval(timeInt);
                        }
                }, 50);
      };
            function zuo(s,yidong){
            var myMario = document.getElementById('marioImg');
            var oldTop = parseInt(myMario.style.left);
            var newTop = oldTop;
            if(oldTop > 400){
                window.alert('到最右边了');
                return false;
            }
            var timeInt = window.setInterval(function(){
                newTop += 5;
                myMario.style[s] = (newTop)+"px";
                if(newTop - oldTop >= 50) {
                        clearInterval(timeInt);
                        }
                }, 50);
      };
           function you(s,yidong){
            var myMario = document.getElementById('marioImg');
            var oldTop = parseInt(myMario.style.left);
            var newTop = oldTop;
            if(oldTop < 50){
                window.alert('到最左边了');
                return false;
            }
            var timeInt = window.setInterval(function(){
                newTop -= 5;
                myMario.style[s] = (newTop)+"px";
                if(oldTop - newTop >= 50) {
                        clearInterval(timeInt);
                        }
                }, 50);
      };
        //全局函数
        function marioMove(direct){
            this.x=0;
            this.y=0;
            switch(direct){
                case 0 :
                   // window.alert('向上移');
                    var s = 'top';
                    shang(s);
                    break;
                case 1 :
                    // window.alert('向右移');
                    var s = 'left';
                    zuo(s);
                    break;
                case 2 :
                    // window.alert('向下移');
                     var s = 'top';
                    xia(s);
                    break;
                case 3 :
                     //window.alert('向左移');
                    var s = 'left';
                    you(s);
                    break;
            };
        }
            
        </script>
        <style>
          body{
                margin: 0;
                padding: 0;
          }
         .gamediv{
           width: 500px;
           height: 400px;
           background: #FFC6CB;
         }    
         .kongzhi{
             width: 300px;
             height: 150px;
             text-align: center;
         }
        </style> 
    </head>
    <body>
        <div class="gamediv">
            <img  id="marioImg" style="width:50px; height: 50px;position:absolute; top:0; left:0; " src="maliao.jpg"/>
        </div>
        <table class="kongzhi">
            <tr><td colspan="3">方向控制</td></tr>
            <tr><td>**</td><td><button class="top" onclick="marioMove(0);">↑↑</button></td><td>**</td></tr>
            <tr><td><button class="left" onclick="marioMove(3);">←←</button></td><td>**</td><td><button class="right" onclick="marioMove(1);">→→</button></td></tr>
            <tr><td>**</td><td><button class="down" onclick="marioMove(2);">↓↓</button></td><td>**</td></tr>
        </table>
        

    </body>
</html>
